<extend name="zh_tw:Public:base" />
<block name="title">
    <title>訂單詳情</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/OrderPage/index.css?rev=0f8976b8dc8f55a558e5af370a99a0b8">
    <link rel="stylesheet" type="text/css" href="/Public/jslib/toastr/2.1.2/toastr.min.css?rev=e36d7ff8c89b5bb6e9db66a169d59c47">
</block>
<block name="document">
    <div id="doc" class="container" data-today="{:date('Y-m-d')}">
        <!--<div id="doc-header" class="navbar navbar-fixed-top">
            <a href="/Home/OrderPage/list" class="pull-left navbar-icon"><span class="iconfont icon-chevronleft"></span></a>
            <div class="navbar-title typo-text-white-deep">訂單詳情</div>
        </div>-->
        <div class="background-F5"></div> 
        <div id="doc-body">
            <div class="horizontal-padding bottom-divider">
                <div class="fixed-left-container">
                    <div class="fixed-left">酒店名稱</div>
                    <div>
                        <div class="nowrap-content order-hotel-name nowrap-content-color"></div>
                    </div>
                </div>
                <div class="fixed-left-container">
                    <div class="fixed-left">酒店地址</div>
                    <div>
                        <div class="nowrap-content order-hotel-address nowrap-content-color"></div>
                    </div>
                </div>   
                <div class="fixed-left-container">
                    <div class="fixed-left">房型</div>
                    <div>
                        <div class="nowrap-content order-room-type nowrap-content-color"></div>
                    </div>
                </div>
            </div>        
            <div id="addRoomInfoHTML"></div>
            <div class="horizontal-padding bottom-divider">
                <div class="fixed-left-container">
                    <div class="fixed-left">訂單編號</div>
                    <div class="order-status-container">
                        <div class="nowrap-content order-number nowrap-content-color" style="float: left;margin-right: 12px;"></div>
                        <!--<div class="order-status typo-text-white-deep text-sm"></div>-->
                    </div>
                </div>
                <div class="fixed-left-container">
                    <div class="fixed-left">入住時間</div>
                    <div>
                        <div class="nowrap-content text-info"><span style="margin-right: 4px;" class="order-checkin-date"></span>(<span class="order-night"></span>)</div>
                    </div>
                </div>
                <div class="fixed-left-container order-reserved-container hidden">
                    <div class="fixed-left">保留時間</div>
                    <div>
                        <div class="nowrap-content text-info order-reserved"></div>
                    </div>
                </div>
            </div>    
            <div class="horizontal-padding bottom-divider">                
                <div class="fixed-left-container orderPrice">
                    <div class="fixed-left">訂單金額</div>
                    <div>
                        <div class="nowrap-content"><span class="nowrap-content-color">{$defaultSymbol}<span class="order-price"></span></div>
                    </div>
                </div>                
                <div class="fixed-left-container receivePrice hidden">
                    <div class="fixed-left">已收金額</div>
                    <div>
                        <div class="nowrap-content"><span class="nowrap-content-color">{$defaultSymbol}<span class="order-receive"></span></div>
                    </div>
                </div>
                <div class="fixed-left-container">
                    <div class="fixed-left">押金</div>
                    <div>
                        <div class="nowrap-content"><span class="text-money">{$defaultSymbol}<span class="order-deposit"></span></div>
                    </div>
                </div>
                <div class="fixed-left-container hidden">
                    <div class="fixed-left">捐贈金額</div>
                    <div>
                        <div class="nowrap-content"><span class="text-money">{$defaultSymbol}<span class="order-charityPrice"></span></div>
                    </div>
                </div>
                <div class="fixed-left-container">
                    <div class="fixed-left">合計</div>
                    <div>
                        <div class="nowrap-content"><span class="text-money">{$defaultSymbol}<span class="order-total"></span></div>
                    </div>
                </div>
                <div class="fixed-left-container hidden">
                    <div class="fixed-left">優惠券</div>
                    <div>
                        <div class="nowrap-content"><span class="text-money">-{$defaultSymbol}<span class="coupon-price"></span></div>
                    </div>
                </div>
                <div class="fixed-left-container payable hidden">
                    <div class="fixed-left">預付</div>
                    <div>
                        <div class="nowrap-content"><span class="text-money">{$defaultSymbol}<span class="order-payable"></span></div>
                    </div>
                </div>
            </div>
            
            <div class="horizontal-padding">
                <div class="line-pay-prompt hidden">暫時只支持線下支付</div>
                <div class="line-check-prompt hidden">支付成功，請及時到酒店前臺辦理入住</div>
                <div class="line-check-id-prompt hidden">支付成功，請填寫身份證後辦理入住</div>
                <div id="orderBookingContainer" class="row vertical-margin vertical-padding hidden">
                    <div  class="col-xs-12  btn-sm btn-accent btn-raised speedpay">立即支付</div>
                    <div class="col-xs-12 text-center vertical-margin line-from-service-before"> 
                        <a data-toggle="modal" data-target="#cancelModal" class=" btn-sm btn-link">取消訂單</a>
                    </div>                    
                    <div class="col-xs-12 text-center vertical-margin line-from-service hidden">   
                        <div class="col-xs-6" style="padding:0 17px 0 0;">
                        	<a data-toggle="modal" data-target="#cancelModal" class=" btn-sm btn-link line-cancel-order">取消訂單</a>
                        </div>
                        <div class="col-xs-6" style="padding:0 0 0 17px;">
                            <a href="" class=" btn-sm btn-link line-cancel-service">聯系客服</a>
                        </div>
                    </div>
                </div>
                <div id="orderCheckInContainer" class="row vertical-margin vertical-padding hidden">
                    <div id="orderCheckin" class="col-xs-12  btn-sm btn-primary btn-raised">全部入住</div>
                    <div class="col-xs-12 text-center vertical-margin"><a id="orderRefund" data-toggle="modal" data-target="#refundModal" class="btn-sm btn-link">申請退款</a></div>
                </div>
                <div id="orderCheckOutContainer" class="row vertical-margin vertical-padding hidden">
                    <!--<a id="orderRoomCard" href="/Home/RoomPage/index" class="col-xs-12 btn-sm btn-primary btn-raised">獲取房卡</a>-->
                    <div class="col-xs-12 text-center vertical-margin"><a data-toggle="modal" data-target="#checkOutModal" id="orderCheckOut" class="btn-sm btn-link">提前退房</a></div>
                </div>
                <a href="" class="contact-the-shopkeeper vertical-margin text-right text-accent">如有問題？聯系掌櫃</a>
            </div>
        </div>
        <include file="zh_tw:Public:Include_login" />
    </div>
    <div class="modal" id="refundModal">
        <div class="vertical-middle-block container">
            <div class="modal-dialog modal-sm vertical-middle-block-cell">
                <div class="modal-content">
                    <div class="modal-header">
                        您確定要申請退款嗎？<small style="color: red;" class="isCharityPrice hidden"> (捐贈金額不可退款)</small>
                    </div>
                    <div class="modal-body">
                        <div class="typo-text-black-light wrap-content vertical-margin">退款規則：<span class="text-error order-refund-rule"></span></div>
                        <form class="form-horizontal form-sm vertical-margin" onkeydown="if(event.keyCode==13){return false;}">
                            <div class="form-group form-group-normal">
                                <label class="col-xs-2 control-label col-without-padding">理由：</label>
                                <div class="col-xs-10 col-without-padding">
                                    <textarea type="text" class="form-control" maxlength="255" id="requestRefundReason" placeholder="請填寫退款理由"></textarea>
                                </div>
                            </div>
                        </form>
                        <div class="text-right">
                            <div type="button" class="btn-raised ulite-js-btn ulite-js-ripple-effect btn" id="submitRefund">確認</div>
                            <div type="button" class="btn-raised ulite-js-btn ulite-js-ripple-effect btn btn-primary" data-dismiss="modal">點錯了</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="cancelModal">
        <div class="vertical-middle-block container">
            <div class="modal-dialog modal-sm vertical-middle-block-cell">
                <div class="modal-content">
                    <div class="modal-header">
                        您確定要取消該訂單嗎？
                    </div>
                    <div class="modal-body">
                        <div class="text-right">
                            <div type="button" class="btn-raised ulite-js-btn ulite-js-ripple-effect btn" id="submitCancel">取消訂單</div>
                            <div type="button" class="btn-raised ulite-js-btn ulite-js-ripple-effect btn btn-primary" data-dismiss="modal">點錯了</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal" id="checkOutModal">
        <div class="vertical-middle-block container">
            <div class="modal-dialog modal-sm vertical-middle-block-cell">
                <div class="modal-content">
                    <div class="modal-header"> 您確定要提前退房嗎？<small style="color: red;" class="isCharityPrice hidden"> (捐贈金額不可退款)</small></div>
                    <div class="modal-body">
                        <form class="checkedRoomName"></form>                        
                        <div class="vertical-padding wrap-content">提前退房後，會導致您<span class="text-error">將無法繼續獲取該訂單房卡！</span></div>
                        <div class="text-right">
                            <div type="button" class="btn-raised ulite-js-btn ulite-js-ripple-effect btn" id="submitCheckOut">確定退房</div>
                            <div type="button" class="btn-raised ulite-js-btn ulite-js-ripple-effect btn btn-primary" data-dismiss="modal">點錯了</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <include file="zh_tw:Public:Include_identification_modal"/>
    <include file="zh_tw:Public:Include_loading" is-hidden="hidden" />
    <canvas class="hidden"></cancas>
    <!--js 使用的tag模板-->
    <script type="text/html" id="templateRoomInfo">
        <div class="horizontal-padding bottom-divider">
            <div class="fixed-left-container">
                <div class="fixed-left">房間名稱</div>
                <div>
                    <a href="/Home/RoomPage/index" class=" btn-sm btn-primary btn-raised orderRoomCard hidden" style="float: right; line-height: 28px;height: 28px;">獲取房卡</a>
                    <a class=" btn-sm btn-primary btn-raised noOrderRoomCard hidden" style="float: right; line-height: 28px;height: 28px;background: #CCCCCC;">無二維碼鑰匙</a>
                    <div class="nowrap-content order-room-name nowrap-content-color" ></div>
                </div>
            </div>
            <div class="fixed-left-container">
                <div class="fixed-left">入住人</div>
                <div>
                    <div class="nowrap-content order-user-name nowrap-content-color"></div>
                </div>
            </div>
            <div class="fixed-left-container">
                <div class="fixed-left">手機號</div>
                <div>
                    <div class="nowrap-content order-user-mobile nowrap-content-color"></div>
                </div>
            </div>  
            <div class="fixed-left-container">
                <div class="fixed-left">身份證</div>
                <div>
                    <div class="nowrap-content order-user-idCard nowrap-content-color"></div>
                </div>
            </div>  
            <div class="fixed-left-container">
                <div class="fixed-left">訂單狀態</div>
                <div class="order-status-container">
                    <div class=" btn-sm btn-primary btn-raised orderCheckin hidden" style="float: right; line-height: 28px;height: 28px;">確認入住</div>
                    <div class="fillIdentity hidden"></div>
                    <div class="order-status typo-text-white-deep text-sm "></div>
                </div>
            </div>               
        </div> 
    </script>    
    <script type="text/html" id="templateRoomChecked">
        <label class="addLabel"><input name="room" type="checkbox" value=""  class="checkbox-box"/><span class="roomName "></span></label>
    </script>     
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/jslib/toastr/2.1.2/toastr.min.js?rev=1778e466055d4a265993e979c174c338"></script>
    <script type="text/javascript" src="/Public/dist/Home/OrderPage/index.js?rev=68fe36ed839b239a21038e74c6d7dcd1s"></script>
</block>
